[Day10] 修飾符與簡寫

第 12 屆 iThome 鐵人賽

DAY 10

Modern Web

少年學Vue，如隙中窺月系列第 10 篇

12th鐵人賽

Leo

2020-09-24 20:03:25

971 瀏覽

分享至

事件觀念

如果我們建立一個函數 show ，並且將 event 當成它的參數，函數執行在 console 印出 event 參數是什麼，此時我們透過 v-on 將點擊事件還有 show 函數綁在一起，在不傳入任何值給 show 當參數的狀況下，當我們點擊 click ，此時 console 會顯示出 ＭouseEvent ，這就是當我們滑鼠點擊所觸發的 click 滑鼠事件，其他比較常見的還有 keyup 按鍵事件。

<body>
    <div id=app>
        <a href="https://www.google.com/?hl=zh_tw" v-on:click='show'>點擊</a>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            show:function(event){
                console.log(event)
            }
        }
    })
</script>

修飾符

前面提到，如果當我們點擊後觸發滑鼠事件，此時 a 標籤的預設功能就會啟動，我們會連結到 href的網址上，如果我們想要點擊 a 標籤卻沒有啟動 a 標籤的預設功能，使 a 標籤不會連結到其他網址，我們可以在 cl2 方法中，將 e 事件參數設定 preventDefault()，他就會將 a 標籤 DOM 本身就擁有連結的功能給消失。而 Vue 中提供了修飾符的用法，當我們使用 v-on 綁定 click 事件時，加上.prevent，此時 a 標籤預設連結的功能就會消失。

<body>
    <div id=app>
        <a href="https://www.google.com/?hl=zh_tw" v-on:click.prevent='cl1'>點擊１</a>
				<a href="https://www.google.com/?hl=zh_tw" v-on:click='cl2'>點擊２</a>
    </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        methods: {
            cl1:function(){
                console.log('點擊成功')
            },
						cl2:function(e){
								e.preventDefault()
	              console.log('點擊成功')
	          }
        }
    })
</script>

簡寫

先前提到，如果我們要綁定一個觸發事件，可以使用 v-on: ，也可以直接簡寫成＠，結果都會是一樣的。還有我們使用動態綁定屬性的 v-bind 指定，也可以直接簡寫 : 符號，增加開發效率。

<body>
    <div id=app>
        <a href="https://www.google.com/?hl=zh_tw" v-on:click.prevent='cl1'>v-on:</a>
        <a href="https://www.google.com/?hl=zh_tw" @click.prevent='cl1'>@</a>
        <img v-bind:src="url" alt="">
        <img :src="url" alt="">
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            url:'http://img.ewebweb.com/uploads/20190614/14/1560492017-TUpfOhVQro.jpg'
        },
        methods: {
            cl1:function(){
                console.log('點擊成功');
            }
        }
    })
</script>